<template>
    <div class="flex min-h-screen flex-col bg-[#f9f9f9]">
        <!-- 简约导航栏 -->
        <nav class="border-b border-gray-100 bg-white">
            <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
                <a href="/" class="text-2xl font-light tracking-tighter">今日头条</a>
                <div class="flex items-center space-x-4">
                    <a href="/" class="hidden text-sm font-medium transition-colors hover:text-gray-600 md:block"
                        >返回首页</a
                    >
                </div>
            </div>
        </nav>

        <!-- 登录主内容 -->
        <main class="flex flex-grow items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
            <div class="w-full max-w-md space-y-8">
                <div class="auth-container rounded-lg bg-white px-10 py-8">
                    <div class="mb-8 text-center">
                        <h2 class="mb-2 text-3xl font-light tracking-tight">欢迎回来</h2>
                        <p class="text-gray-500">登录您的今日头条账户</p>
                    </div>

                    <form class="space-y-6" @submit.prevent="handleLoginSubmit">
                        <div>
                            <label for="username" class="mb-1 block text-sm font-medium text-gray-700">用户名</label>
                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <i class="far fa-user text-gray-400"></i>
                                </div>
                                <input
                                    id="username"
                                    name="username"
                                    type="text"
                                    autocomplete="username"
                                    required
                                    class="input-field w-full rounded-lg border border-gray-200 py-3 pl-10 pr-3 focus:border-black focus:outline-none"
                                    placeholder="您的用户名"
                                />
                            </div>
                        </div>
                        <!-- <div>
                            <label for="email" class="mb-1 block text-sm font-medium text-gray-700">电子邮箱</label>
                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <i class="far fa-envelope text-gray-400"></i>
                                </div>
                                <input
                                    id="email"
                                    name="email"
                                    type="email"
                                    autocomplete="email"
                                    required
                                    class="input-field w-full rounded-lg border border-gray-200 py-3 pl-10 pr-3 focus:border-black focus:outline-none"
                                    placeholder="your@email.com"
                                />
                            </div>
                        </div> -->

                        <div>
                            <div class="mb-1 flex items-center justify-between">
                                <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                                <a href="#" class="auth-link text-xs font-medium text-gray-500 hover:text-black"
                                    >忘记密码?</a
                                >
                            </div>
                            <div class="relative">
                                <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                                    <i class="fas fa-lock text-gray-400"></i>
                                </div>
                                <input
                                    id="password"
                                    name="password"
                                    type="password"
                                    autocomplete="current-password"
                                    required
                                    class="input-field w-full rounded-lg border border-gray-200 py-3 pl-10 pr-3 focus:border-black focus:outline-none"
                                    placeholder="••••••••"
                                />
                                <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3">
                                    <i class="far fa-eye text-gray-400 hover:text-gray-600"></i>
                                </button>
                            </div>
                        </div>

                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <input
                                    id="remember-me"
                                    name="remember-me"
                                    type="checkbox"
                                    class="h-4 w-4 rounded border-gray-300 focus:ring-black"
                                />
                                <label for="remember-me" class="ml-2 block text-sm text-gray-700"> 记住我 </label>
                            </div>
                        </div>

                        <div>
                            <button
                                type="submit"
                                class="flex w-full justify-center rounded-lg border border-transparent bg-black px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
                            >
                                登录
                            </button>
                        </div>
                    </form>

                    <!-- <div class="mt-6">
                        <div class="relative">
                            <div class="absolute inset-0 flex items-center">
                                <div class="w-full border-t border-gray-200"></div>
                            </div>
                            <div class="relative flex justify-center text-sm">
                                <span class="bg-white px-2 text-gray-500">或使用社交账号登录</span>
                            </div>
                        </div>

                        <div class="mt-6 grid grid-cols-3 gap-3">
                            <a
                                href="#"
                                class="social-btn inline-flex w-full justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                            >
                                <i class="fab fa-weixin text-lg"></i>
                            </a>
                            <a
                                href="#"
                                class="social-btn inline-flex w-full justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                            >
                                <i class="fab fa-weibo text-lg"></i>
                            </a>
                            <a
                                href="#"
                                class="social-btn inline-flex w-full justify-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-50"
                            >
                                <i class="fab fa-google text-lg"></i>
                            </a>
                        </div>
                    </div> -->

                    <div class="mt-6 text-center">
                        <p class="text-sm text-gray-500">
                            还没有账号?
                            <a
                                :href="PageRouteEnum.REGISTER"
                                class="auth-link font-medium text-black hover:text-gray-700"
                                >立即注册</a
                            >
                        </p>
                    </div>
                </div>

                <div class="mt-6 text-center">
                    <p class="text-xs text-gray-400">
                        登录即表示您同意我们的
                        <a href="#" class="text-gray-500 transition-colors hover:text-black">服务条款</a>
                        和
                        <a href="#" class="text-gray-500 transition-colors hover:text-black">隐私政策</a>
                    </p>
                </div>
            </div>
        </main>

        <!-- 极简页脚 -->
        <footer class="border-t border-gray-100 bg-white">
            <div class="mx-auto max-w-7xl px-6 py-8">
                <div class="flex flex-col items-center justify-between md:flex-row">
                    <div class="mb-4 md:mb-0">
                        <a href="#" class="text-xl font-light">今日头条</a>
                        <p class="mt-1 text-xs font-light text-gray-500">发现与分享每天的新鲜事</p>
                    </div>
                    <div class="flex space-x-6">
                        <a href="#" class="text-gray-500 transition-colors hover:text-gray-800"
                            ><i class="fab fa-instagram"></i
                        ></a>
                        <a href="#" class="text-gray-500 transition-colors hover:text-gray-800"
                            ><i class="fab fa-weibo"></i
                        ></a>
                        <a href="#" class="text-gray-500 transition-colors hover:text-gray-800"
                            ><i class="fab fa-500px"></i
                        ></a>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>

<script setup lang="ts">
import { PageRouteEnum } from "@/router/routes";
import { useUserStore } from "@/stores/user";
import { Feedback } from "@/utils/feedback";

const userStore = useUserStore();

const router = useRouter();

const handleLoginSubmit = async (e: Event) => {
    e.preventDefault();
    const { username, password } = e.target as HTMLFormElement;
    if (!username.value || !password.value) {
        Feedback.msgError("用户名或密码不能为空！");
        return;
    }

    await userStore.login(username.value, password.value);

    Feedback.msgSuccess("登录成功！");
    router.push("/");
    // 返回上一页
    // history.go(-1);
};
</script>

<style lang="scss" scoped>
.auth-container {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.02);
}

.input-field {
    transition: all 0.2s ease;
}

.input-field:focus {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.social-btn {
    transition: all 0.2s ease;
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.auth-link {
    transition: all 0.2s ease;
}

.auth-link:hover {
    color: #000;
}
</style>
